<template>
  <div style="padding:20px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item prop="keyWord" label="关键字:">
          <el-input
            v-model="queryParams.keyword"
            placeholder="请通过关键词搜索"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item prop="time" label="设置时间:">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="-"
            @change="chooseTime()"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <div class="typeButton"  style="display: flex;">
        <button style="width:110px;" @click="chooseStatus('')" :class="{ active:queryParams.status == '' }">全部</button>
        <button style="width:110px;margin-left: 0px;" @click="chooseStatus(1)" :class="{ active:queryParams.status == 1}">待审核({{ updateNum.unExamine }})</button>
        <button style="width:100px;margin-left: 0px;" @click="chooseStatus(3)" :class="{ active:queryParams.status == 3}">未通过</button>
        <button style="width:110px;margin-left: 0px;" @click="chooseStatus(2)" :class="{ active:queryParams.status == 2}">已通过</button>
      </div>
      <el-table
        :data="trendsList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="memberName"
          align="center"
          label="发布人"
          width="150">
        </el-table-column>
        <el-table-column
          prop="workUnit"
          align="center"
          label="所属公司"
          width="350">
        </el-table-column>
        <el-table-column
          prop="trendsContent"
          align="center"
          label="内容">
        </el-table-column>
        <el-table-column
          prop="releaseTime"
          align="center"
          label="发布时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="likeNumber"
          align="center"
          label="点赞量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          width="120">
        <template scope="scope">
          <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
          <el-tag type="success" v-if="scope.row.status == 2">已通过</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 3">未通过</el-tag>
        </template>
        </el-table-column>
        <el-table-column
        label="操作"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status != 1"
            @click="getMessage(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
             v-if="scope.row.status == 1"
            @click="getMessage(scope.row)"
            >审核</el-button
          >
         
        </template>
      </el-table-column>
      </el-table>
      
      <el-dialog
        title="动态详情"
        :visible.sync="open"
        width="30%">
        <div class="trendsMessage">
          <div>会员姓名：{{ form.memberName }}</div>
          <div>发布时间：{{ form.releaseTime }}</div>
          <div style="display: flex" v-if="form.commonFileRequests == ''">
            <img :src=item.url v-for="(item,index) in form.commonFileRequests" :key="index" style="width:120px;height: 100px;">
          </div>
          <div>动态详情：{{ form.trendsContent }}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button v-if="form.status != 1" @click="open = false">返回</el-button>
          <el-button v-if="form.status == 1" @click="inOpen = true">退回</el-button>
          <el-button type="primary" v-if="form.status == 1" @click="trendDeal(2),open = false">通过</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="输入退回原因"
        :visible.sync="inOpen"
        width="30%">
        <el-input v-model="reason"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="inOpen = false">取 消</el-button>
          <el-button type="primary" @click="inOpen = false,open = false,trendDeal(3)">确 定</el-button>
        </span>
      </el-dialog>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  </div>
</template>
<script>
import {
  trendsList,examine,getStatusNum
} from "@/api/society";
export default {
  data(){
    return {
    // 显示搜索条件
    showSearch: true,
    // 查询参数
    queryParams: {
      pageSize: 10,
      pageNum: 1,
      status:'',
      beginTime:'',
      endTime:'',
      keyword:'',
    },
    //总条数
    total:0,
    //动态列表
    trendsList:[],
    //是否展示弹窗
    open:false,
    //嵌套弹窗
    inOpen:false,
    //选择目标的数据
    form:[],
    //拒绝原因
    reason:'',
    //时间
    time:'',
    //动态数量
    updateNum:[],
    }
  },
  methods:{
    getList(){
      let params = {
        ...this.queryParams
      }
      trendsList(params).then(res =>{
        if(res.code == 200){
          this.total = res.total
          this.trendsList = res.rows
          this.trendsList.forEach((item,index) => {
            this.$set(item, "id", index + 1);
          });
        }
      })
      getStatusNum().then(res =>{
        if(res.code == 200){
          this.updateNum = res.data
        }
      })
    },
    getMessage(data){
      if(data.status == 1){
        this.$router.push({
          path: "/society/updatesMessage",
          query: { key: data.tid },
        });
      }else{
        this.$router.push({
          path: "/society/updatesView",
          query: { key: data.tid },
        });
      }

    },
    //重置表单
    resetQuery() {
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        status:'',
        beginTime:'',
        endTime:'',
        keyword:'',
      },
      this.time = ''
      this.getList()
    },
    //时间分割
    chooseTime(){
      this.queryParams.beginTime = this.time[0]
      this.queryParams.endTime = this.time[1]
    },
    //审核
    trendDeal(data){
      let params = {
        reason: this.reason,
        status: data,
        tid: this.form.tid
      }
      examine(params).then(res =>{
        if(res.code == 200){
          this.$message({
          message: '处理完成',
          type: 'success'
        });
        }
      })
      this.form=[]
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
    },
    //选择状态
    chooseStatus(data) {
      this.queryParams.status = data
      this.getList()
    },
  },
  created(){
    this.getList()
  }
}
</script>
<style scoped>
.list_top{
  display: flex;
  margin:0px 20px;
  height: 40px;
  background: #DDDDDD;
  margin-bottom: 10px;
  line-height: 40px;
  color: #606266;
  font-weight: 600;
  font-size:14px;
  text-align: center;
}
.list_top > span:last-child{
  margin-left:auto;
  font-size:16px;
}
.list{
  margin:0px 20px;
  border-top:10px solid gainsboro;
  height: 80px;
  display: flex;
  background: #F8F8FB;
  line-height: 70px;
  margin-bottom:10px;
}

.list >  span{
  font-size: 16px;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #000000;
} 
.list >  span:nth-child(6){
  white-space: nowrap; 
  overflow: hidden;
  text-overflow:ellipsis;
} 
.list >  span:last-child{
  margin-left:auto;
  font-size:16px;
}
.list >  span:last-child:hover{
  color:#409EFF
}
.trendsMessage{
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.trendsMessage > div{
  margin-bottom: 20px;
}
.active{
  border-bottom: none;
  background-color: #E8F4FF !important;
  color:#1890FF !important;
}
.typeButton button{
  height: 40px;
  outline:none;
  font-size:13px;
  font-weight: 600;
  border:none;
  font-family:"microsoft YaHei";
  color:#606266;
}
.typeButton{
  margin-bottom: 3px;
}
</style>